<template>
	<view class="page">
		<view class="tab-box" v-if="order">
			<view class="it" :class="{on:type==1}" @click="type=1">
				送自己
			</view>
			<view class="it" :class="{on:type==2}" @click="type=2">
				送别人
			</view>
		</view>
		<navigator hover-class="on" url="./address/index?type=select" class="address-box" v-if="order&&type==1&&order.virtual_type==0">
			<view class="left">
				<image :src="`/static/icon-address.png`" mode=""></image>
				<view class="text" v-if="order.addressInfo.real_name">
					<view class="title">
						<view class="name">{{order.addressInfo.real_name}}</view>
						<view class="tel">{{order.addressInfo.phone}}</view>
					</view>
					<view class="address">
						{{order.addressInfo.province}} {{order.addressInfo.city}} {{order.addressInfo.district}} {{order.addressInfo.detail}}
					</view>
				</view>
				<view class="address" v-else>
					请选择收货地址
				</view>
			</view>
			<up-icon name="arrow-right" color="#aaa" size="38rpx"></up-icon>
		</navigator>
		<view class="order-box" v-if="order">
			<view class="item" :class="{on:index==0}" v-for="(item,index) in order.cartInfo">
				<image :src="item.productInfo.image" mode="aspectFill"></image>
				<view class="text">
					<view class="h1">
						{{item.productInfo.store_name}}
					</view>
					<view class="span">
						{{item.productInfo.attrInfo.suk}}
					</view>
					<view class="b">
						<view class="money">
							<view class="em">￥</view>{{item.productInfo.attrInfo.price}}
						</view>
						<view class="num">
							<text>x{{item.cart_num}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="info">
				<view class="it">
					<view class="msg">
						运费
					</view>
					<view class="val">
						¥{{order.priceGroup.storePostage}}
					</view>
				</view>
				<!-- <view class="it" v-if="amount.level_price>0">
					<view class="msg">
						会员优惠
					</view>
					<view class="val">
						-￥{{amount.level_price}}
					</view>
				</view> -->
				<view class="it" v-if="order.integral_open>0">
					<view class="msg">
						抵扣金
					</view>
					<view class="val dkj">
						<view class="m">
							当前抵扣金：<text style='color:#FF4A40;font-size:30rpx;'>{{order.usable_integral}}</text>
						</view>
						 <up-checkbox-group
							v-model="useIntegral"
							placement="column"
							@change="checkboxChange"
						>
							<up-checkbox
							name="useIntegral"
							activeColor="#F5493D"
							shape="circle"
							:disabled="order.usable_integral==0"
							>
							</up-checkbox>
						</up-checkbox-group>
						
					</view>
				</view>
				<view class="it">
					<view class="msg">
						商品总价
					</view>
					<view class="val">
						<view class="money">
							<view class="em">￥</view>{{order.priceGroup.sumPrice}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-box" v-if="order">
			<view class="left">
				实付金额<view class="money">
							<view class="em">￥</view>{{amount.pay_price}}
						</view>
			</view>
			<view class="btn" @click="onSelectPay">
				立即支付
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import {orderConfirm,orderCreate,orderComputed} from "@/api/products.js"
	const address=ref('')
	const order=ref('')
	const cartId=ref('')
	const amount=ref({pay_price:0.00})
	const type=ref(1)
	const newType=ref(0)
	const useIntegral=ref([])
	onLoad((obj)=>{
		cartId.value=obj.cartId
		if(obj.new){
			newType.value=obj.new
		}
		if(obj.type){
			type.value=obj.type
		}
		onOrderConfirm()
	})
	onShow(()=>{
		if(uni.getStorageSync('address')){
			address.value=uni.getStorageSync('address')
			uni.setStorageSync('address',null)
			onOrderComputed()
		}
	})
	const checkboxChange = (n) => {
	  onOrderComputed();
	};
	const onOrderConfirm=async ()=>{
		let post={"cartId": cartId.value,new:newType.value};
		if(address.value){
			post.addressId=address.value.id
		}
		let res= await orderConfirm(post)
		order.value=res.data
		onOrderComputed();
	}
	const onOrderComputed=async ()=>{
		let p={}
		if(useIntegral.value.length){
			p.useIntegral=order.value.usable_integral
		}
		let amountRes=await orderComputed(order.value.orderKey,p)
		amount.value=amountRes.data.result
	}
	const onSelectPay=async ()=>{
		uni.showLoading({
			mask:true,
			title:'创建订单'
		})
		try {
			let post={
				"payType": '', 
				"new": newType.value,
				"order_type": type.value==1?"self":'other' ,
				useIntegral: useIntegral.value.length
			}
			if(type.value==1&&order.value.virtual_type==0){
				if(!order.value.addressInfo.id){
					return uni.$u.toast('请选择收货地址！');
				}
				post.real_name=order.value.addressInfo.real_name
				post.phone=order.value.addressInfo.phone
				post.addressId=order.value.addressInfo.id
			}
			let res= await orderCreate(order.value.orderKey,post)
			uni.redirectTo({
				url:'./pay?orderId='+res.data.result.orderId+'&type='+type.value
			})
		} catch (error) {
			uni.hideLoading()
			uni.$u.toast(error.msg??'失败')
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F6FA;
	}
	.page{
		padding:24rpx;
		padding-bottom: calc(24rpx + 100rpx + env(safe-area-inset-bottom));
	}
	.tab-box{
		display: flex;justify-content:space-between;
		line-height: 68rpx;
		gap: 30rpx;
		background-color: #fff;
		border-radius: 40rpx;
		.it{
			flex:1;
			color:#838A99;
			border-radius: 40rpx;
			padding:0 24rpx;line-height: 68rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			text-align: center;
			&.on{
				background-color: #FF4A40;
				color:#fff;
			}
		}
	}
	.address-box{
		margin-top:20rpx;
		background-color: #fff;
		display: flex;
		padding:32rpx;align-items: center;
		border-radius: 16rpx;
		.left{
			flex:1;
			display: flex;align-items: center;font-size: 28rpx;
			image{width:64rpx;height:64rpx;margin-right:24rpx;}
		}
		.right{
			width:14rpx;height:14rpx;
		}
	}
	.order-box{
		margin-top:20rpx;
		padding:40rpx 28rpx;
		padding-bottom: 16rpx;
		background-color: #fff;
		::v-deep{
			.u-number-box{
				border-radius: 8rpx;
				border:1rpx solid #FFE1CC
			}
			.uni-input-wrapper{
				border-left:1rpx solid #FFE1CC;
				border-right:1rpx solid #FFE1CC;
			}
			.u-number-box__plus{
				width:56rpx;
			}
			.u-number-box__minus{
				width:56rpx;
			}
		}
		.item{
			display: flex;
			margin-top:40rpx;
			&:nth-child(1){margin-top:0;}
			image{
				width:180rpx;height: 180rpx;
			}
			.text{
				flex:1;margin-left:20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.h1{
					font-size: 28rpx;color:#141311;font-weight: bold;
				}
				.span{
					font-size: 24rpx;
					color:#838A99;
				}
				.b{
					display: flex;justify-content: space-between;align-items: center;
					image{
						width:36rpx;height:36rpx;
					}
					.money{
						align-items: flex-end;
						display: flex;font-size:36rpx;font-weight: bold;color:#F5493D;
						.em{
							font-size: 24rpx;padding-bottom: 5rpx;
						}
					}
				}
			}
			
		}
		.info{
			margin-top:40rpx;padding-top:16rpx;
			border-top:1rpx solid #E6E6E6;
			.it{
				padding:24rpx 0;line-height: 1;
				display: flex;font-size: 28rpx;
				justify-content: space-between;align-items: center;
				.money{
					align-items: flex-end;
					display: flex;font-size:32rpx;font-weight: bold;color:#F5493D;
					.em{
						font-size: 24rpx;padding-bottom: 5rpx;
					}
				}
				.dkj{
					display: flex;
					align-items: center;
					font-size:24rpx;
					.m{
						margin-right:10rpx;
						display: flex;align-items: center;
					}
				}
			}
		}
	}
	.bottom-box{
		position: fixed;bottom:0;left:0;width:100%;box-sizing: border-box;
		padding:12rpx 28rpx;
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		display: flex;justify-content: space-between;
		.left{
			font-size:24rpx;display: flex;align-items: center;
		}
		.money{
			margin-left:12rpx;
			align-items: flex-end;
			display: flex;font-size:32rpx;font-weight: bold;color:#F5493D;
			.em{
				font-size: 24rpx;padding-bottom: 5rpx;
			}
		}
		.btn{
			width:240rpx;line-height: 76rpx;text-align: center;background-color: #F5493D;
			border-radius: 12rpx;
			font-size: 28rpx;color:#fff;
		}
	}
	
	.popup-form {
		min-height: 200rpx;
		background-color: #FFF6F0;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding-top: 26rpx;
	
		.popup-form-header {
			position: relative;
			width: 100%;
			height: 48rpx;
	
			text {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				height: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 34rpx;
				color: #F5493D;
				line-height: 36rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				pointer-events: none;
			}
	
			image {
				height: 48rpx;
				width: 48rpx;
				object-fit: cover;
				display: block;
				position: absolute;
				right: 28rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	
		.popup-form-submit{
			width: 694rpx;
			height: 92rpx;
			margin: 40rpx auto 20rpx;
			background-color: #F5493D;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			text-transform: none;
			border-radius: 12rpx;
		}
		.popup-form-paytype{
			box-sizing: border-box;
			padding: 0 32rpx;
			margin-top: 50rpx;
			.popup-form-paytype-item+.popup-form-paytype-item{
				margin-top: 38rpx;
			}
			.popup-form-paytype-item{
				display: flex;
				align-items: center;
				.popup-form-paytype-item-icon{
					width: 48rpx;
					height: 48rpx;
					min-width: 48rpx;
				}
				.popup-form-paytype-item-content{
					flex: 1;
					padding-left: 24rpx;
					position: relative;
					.popup-form-paytype-item-content-title{
						height: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #141311;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.popup-form-paytype-item-content-tip{
						height: 22rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #999999;
						line-height: 22rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 18rpx;
						text{
							color: #F5493D;
						}
					}
					.popup-form-paytype-item-content-radio{
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 36rpx;
						height: 36rpx;
						object-fit: cover;
					}
				}
			}
		}
		.popup-form-price{
			height: 36rpx;
			margin-top: 60rpx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			text:nth-child(1){
				height: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			text:nth-child(2){
				height: 36rpx;
				font-family: MiSans, MiSans;
				font-weight: 400;
				font-size: 36rpx;
				color: #F5493D;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				&:before{
					content: '￥';
					font-size: 28rpx;
				}
			}
		}
	}
</style>
